<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
    <!-- 
        过滤器：
            定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
            语法：1.注册过滤器：Vue.filter(name,callback)或 new Vue{filters:{}}
                 2.使用过滤器：{{ xxx |过滤器名}} 或 v-bind：属性 = "xxx |过滤器名"

            Tip:
                1.过滤器也可以接收额外参数、默认第一个为传过来的值  多个过滤器也可以串联
                2.并没有改变原本的数据，是产生新的对应的数据
     -->
    <div id="app">
        现在时间: {{time | formatTime}}<br/>
        <!-- 传参知指定的格式 -->
        现在时间: {{time | formatTime("YYYY年MM月DD日")}}<br/>
        <h3 :x="name | mySlice">Hello 过滤器</h3>
        现在时间: {{time | formatTime | mySlice}}
    </div>


    <script>
        //全局过滤器的配置
        //注意配置一定要new vue实例之前确定
        Vue.filter("mySlice",function(value){
            return value.slice(0,6);
        })
        const vm = new Vue({
            el:"#app",
            data() {
                return {
                    time: new Date().getTime(),
                    name: "TomMasterJackSon"
                };
            },
            //使用过滤器   局部过滤器
            filters:{
                formatTime(value,str="YYYY年MM月DD日 HH:mm:ss"){   //ES6语法：参数默认值
                    return dayjs(value).format(str);//dayjs是引入的第三方库
                },
            }
        })
    </script>
</body>
</html>